<template>
  <div class="con">
    <el-container>
      <!--<el-header style="padding:0;height: 56px;">-->
      <!--<headbox ref="mychild"></headbox>-->
      <!--</el-header>-->
      <!--<el-container>-->
      <!--<el-aside style="width:200px;background-color:#393D49;">-->
      <!--<left></left>-->
      <!--</el-aside>-->
      <el-container>
        <el-main style="padding: 0">
          <!-- 放置内容区 -->
          <div class="contbox6_10" v-if="true">
            <p class="titlelist6_10">
              APP管理
              <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span
              >banner管理
            </p>
            <div class="content">
              <div v-if="sign">
                <div style="margin-top: 10px">
                  <el-table
                    :data="list"
                    ref="multipleTable"
                    :header-cell-style="{
                      background: '#F9FAFC',
                      color: '#222',
                    }"
                    stripe
                    border
                    :row-style="{ height: '0px' }"
                    :cell-style="{ padding: '0px' }"
                    style="margin-top: 24px !important"
                  >
                    <!-- <el-table-column
                      type="selection"
                      width="55"
                    ></el-table-column> -->
                    <el-table-column :span="8" align="center" label="机构ID">
                      <template slot-scope="scope">
                        <span>{{ scope.row.oemUid }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :span="8" align="center" label="机构名称">
                      <template slot-scope="scope">
                        <span>{{ scope.row.officeName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :span="8" align="center" label="手机号">
                      <template slot-scope="scope">
                        <span>{{ scope.row.phone }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :span="8" align="center" label="展示数量">
                      <template slot-scope="scope">
                        <span>{{ scope.row.showNum }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :span="8" align="center" label="停用数量">
                      <template slot-scope="scope">
                        <span>{{ scope.row.stopNum }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :span="16" align="center" label="更新日期">
                      <template slot-scope="scope">
                        <span>{{ scope.row.updateDate }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="200">
                      <template slot-scope="scope">
                        <el-button
                          size="small"
                          type="text"
                          @click="checkInfo(scope.row)"
                          v-if="isAuth('bannerDetails')"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="font-size: 16px; margin-top: 30px">
                    <!-- <div
                      @click="exportFile"
                      class="filter-container"
                      style="
                        margin-left: 20px;
                        float: left;
                        text-align: left;
                        font-size: 16px;
                        color: rgb(31, 165, 243);
                        cursor: pointer;
                        width: auto;
                      "
                    >
                      批量导出
                    </div> -->
                    <div v-show="!listLoading" class="pagination-container">
                      <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="listQuery.page"
                        :page-sizes="[20, 50, 100]"
                        :page-size="listQuery.number"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                      ></el-pagination>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="!sign" style="margin-top: 65px">
                <div style="display: flex; flex-wrap: wrap">
                  <div class="imageInfo" v-for="(itms, i) in list" :key="i">
                    <el-image
                      :src="itms.imgUrl"
                      style="width: 100%; height: 100%"
                    ></el-image>
                    <div class="btn">
                      <el-button @click="dialogFormPlay(itms)">编 辑</el-button>
                      <el-button @click="deleteBnnerData(itms)" type="primary"
                        >删 除</el-button
                      >
                    </div>
                  </div>
                  <div
                    class="imageInfo"
                    v-if="list.length < 10"
                    @click="dialogFormPlay(false)"
                  >
                    <p style="width: 100%">新增banner</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-dialog
            :close-on-click-modal="false"
            title="详情"
            :visible.sync="dialogFormBrandList"
          >
            <el-form
              :model="listQuery"
              :rules="rules"
              ref="form"
              label-width="150px"
            >
              <el-row>
                <el-Col :span="24">
                  <div class="imageListData">
                    <div
                      class="imageInfoList"
                      v-for="(itms, i) in fileList"
                      :key="i"
                    >
                      <el-image :src="itms.imgUrl"></el-image>
                      <div class="imageTextList">
                        <el-button
                          :type="itms.status == 0 ? 'danger' : 'primary'"
                          icon="plus"
                          @click="
                            upStatus(itms.status == 0 ? '1' : '0', itms),
                              fileList[i].status == 0
                                ? (fileList[i].status = '1')
                                : (fileList[i].status = '0')
                          "
                          >{{
                            itms.status == 0 ? "强制关闭" : "恢复"
                          }}</el-button
                        >
                      </div>
                    </div>
                  </div>
                </el-Col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormBrandList = false">取 消</el-button>
              <el-button type="primary" @click="create('form')"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <el-dialog
            :close-on-click-modal="false"
            :title="dialogFormHead"
            width="405px"
            :visible.sync="dialogFormSave"
          >
            <el-form
              :model="listQuery"
              :rules="rules"
              ref="form"
              label-width="150px"
            >
              <el-row>
                <el-Col :span="24">
                  <!-- <div class="imageInfos">
                    <div
                      style="width: 97%;height: 150px;line-height:150px;margin: 15px 15px 15px 15px;border: 1px #002F3F solid;text-align: center"
                    >
                      <el-image
                        :src="form.bannerPhotoPath"
                        v-if="form.bannerPhotoPath"
                        style="width: 100%;height: 150px;"
                      ></el-image>
                      <p v-show="!form.bannerPhotoPath">预览图</p>
                    </div>
                  </div> -->
                  <div
                    class="imageInfos"
                    style="border: none; line-height: 35px"
                  >
                    <el-upload
                      @click="cliUploadPic"
                      :action="httpurl + '/api/fileUpload'"
                      name="file"
                      list-type="picture-card"
                      :file-list="form.options"
                      :limit="1"
                      :before-upload="beforeUpload"
                      :on-success="handleSuccess"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-change="changePic"
                      :class="{ hide: hideUpload }"
                    >
                      <i class="el-icon-plus"></i>
                      <!-- <div style="">
                        <el-button size="small" type="primary"
                          >上传banner图片</el-button
                        >
                        <p style="margin-left: 10px">
                          尺寸要求:345：150，限制大小不超过 1Mb
                        </p>
                      </div> -->
                    </el-upload>
                    <div class="txtBlock">
                      <span>大小 345 x 150px</span>
                      <span>图片大小建议不超过1M</span>
                    </div>
                    <el-dialog :visible.sync="dialogVisible" append-to-body>
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </el-Col>
                <el-Col :span="24">
                  <div
                    style="
                      width: 100%;

                      border-bottom: 1px solid rgb(0, 0, 0);
                      margin-top: 20px;
                      margin-bottom: 10px;
                    "
                  ></div>
                  <div class="imageInfos" style="border: none; display: flex">
                    <el-button
                      :type="form.jumpType == '3' ? 'primary' : ''"
                      @click="form.jumpType = '3'"
                      >跳转至图片</el-button
                    >
                    <el-button
                      :type="form.jumpType == '2' ? 'primary' : ''"
                      @click="form.jumpType = '2'"
                      >站内 跳转</el-button
                    >
                    <!-- class="tabBtn" -->
                    <el-button
                      :type="form.jumpType == '4' ? 'primary' : ''"
                      @click="form.jumpType = '4'"
                      >站外 跳转</el-button
                    >
                  </div>
                </el-Col>
                <el-Col :span="24">
                  <div v-show="form.jumpType == '3'">
                    <!-- <div
                      class="imageInfos"
                      v-for="(itms, i) in form.jumpPhotos"
                      :key="i"
                    >
                      <el-image
                        style=" height: 150px;border: 1px #002F3F solid;width: 100%;"
                        :src="form.jumpPhotos[i].filePath"
                      ></el-image>
                    </div> -->
                    <!-- style="line-height:150px; height: 150px;border: 1px #002F3F solid;"
                      v-if="form.jumpPhotos.length < 1"
                      action
                      ref="upload2"
                      :http-request="submitFileSave2"
                      :before-upload="beforeAvatarUpload2"
                      :show-file-list="false" -->
                    <el-upload
                      class="imageInfos"
                      :action="httpurl + '/api/fileUpload'"
                      name="file"
                      list-type="picture-card"
                      :file-list="form.jumpPhotos"
                      :limit="10"
                      accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                      :before-upload="beforeUpload1"
                      :on-success="handleSuccess2"
                      :on-preview="handlePictureCardPreview2"
                      :on-remove="handleRemove2"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible2" append-to-body>
                      <img width="100%" :src="dialogImageUrl2" alt="" />
                    </el-dialog>
                  </div>
                  <div v-show="form.jumpType == '2'">
                    <!-- <p>请选择一个跳转页面的路径进行</p> -->
                    <el-cascader-panel
                      :options="options"
                      v-model="form.optionss"
                      :props="subCatProps"
                      @change="changes"
                      filterable
                      :show-all-levels="false"
                    ></el-cascader-panel>
                  </div>
                  <div v-show="form.jumpType == '4'">
                    <!-- <p>请选择一个跳转地址的路径进行</p> -->
                    <el-input
                      v-model="form.jumpAddress"
                      class="handPath"
                      placeholder="http(s)://www.跳转链接"
                    ></el-input>
                  </div>
                </el-Col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormSave = false">取 消</el-button>
              <el-button type="primary" @click="create('form')"
                >立即应用</el-button
              >
            </div>
          </el-dialog>
        </el-main>
        <!--<el-footer style="padding:0;">-->
        <!--<footerbox></footerbox>-->
        <!--</el-footer>-->
        <!--</el-container>-->
      </el-container>
    </el-container>
  </div>
</template>

<script>
//   import left from './left.vue'
//   import footerbox from './footer.vue'
//   import headbox from './head.vue'
import ElImage from "element-ui/packages/image/src/main";
import { isUrl } from "../../assets/js/commion";
import https from "../../plugins/https";
export default {
  name: "shareTheTemplate",
  data() {
    return {
      hideUpload: false,
      dialogImageUrl: "",
      dialogVisible: false,
      dialogImageUrl2: "",
      dialogVisible2: false,
      // httpurl: "http://10.12.204.208:10688/",
      httpurl: this.GLOBAL.httpurl,
      list: [],
      total: null,
      listLoading: true,
      checkedAll: false,
      listQuery: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        channelName: undefined, //	品牌名称
        channelCode: undefined, //	品牌编号
        officeType: undefined, //	机构类型
        officeName: undefined, //	机构名称
        phone: undefined, //	手机号
        status: undefined, //	状态
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        page: 1, //第几页
        number: 20, //每页几条
      },
      form: {
        uid: undefined, //	图片id
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        bannerPhotoPath: undefined, //	banner图片地址
        jumpAddress: undefined, //	跳转地址
        jumpType: 3, //	跳转类型
        jumpPhotos: [], //	跳转图片List
        options: [],
        optionss: "",
      },
      label: 1,
      rules: {},
      // urltype: this.GLOBAL.httpurl,//请求地址
      selectTime: [],
      sign: localStorage.getItem("jurisdiction") == 2, //最高权限看到的true
      dialogFormSave: false,
      dialogFormHead: "",
      dialogFormBrandList: false, //创建品牌页面
      multipleSelection: [], //选中的数组
      fileData: new FormData(), //文件上传对象
      options: [],
      subCatProps: {
        value: "jumpAddress",
        label: "name",
        children: "children",
      },
      fileList: [],
    };
  },
  components: {
    ElImage,
  },
  created() {
    let that = this;
    that.handleSelectList();
  },

  methods: {
    // cliUploadPic(){
    //   alert("发生点击")
    // },
    changePic(file, fileList) {
      this.hideUpload = fileList.length >= 1;
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.list.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation： 界面集合获取数据
     **/
    handleSelectList() {
      let that = this;
      if (that.sign) {
        that.listLoading = true;
        that
          .axios({
            //axios请求
            method: "POST",
            url: "/api/template/queryBannerList",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: that.listQuery,
          })
          .then((res) => {
            if (res.data.code == "0000") {
              that.list = res.data.data;
              that.total = res.data.total;

              that.listLoading = false;
            } else {
              that.listLoading = false;
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              // that.$notify({
              //   title: "错误",
              //   message: res.msg,
              //   type: "error"
              // });
            }
          })
          .catch((err) => {
            return;
          });
      } else {
        that
          .axios({
            //axios请求
            method: "POST",
            url: "/api/template/queryBannerPhoto",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: { oemUid: that.listQuery.oemUid },
          })
          .then((res) => {
            if (res.data.code == "0000") {
              that.list = res.data.data;
            } else {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              // that.$notify({
              //   title: "错误",
              //   message: res.msg,
              //   type: "error"
              // });
            }
          });
      }
      that
        .axios({
          //axios请求
          url: "/api/template/queryInternalJump",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
        })
        .then((res) => {
          if (res.data.code == "0000") {
            that.options = res.data.data;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // that.$notify({
            //   title: "错误",
            //   message: res.data.msg,
            //   type: "error"
            // });
          }
        });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      let that = this;
      that.listQuery.number = val;
      that.handleSelectList();
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      let that = this;
      that.listQuery.page = val;
      that.handleSelectList();
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 上传图片
     * @date:2020/7/13   15:00
     */
    submitFileSave() {
      let that = this;
      that.fileData.append("file", that.$refs.upload.uploadFiles[0].raw);
      that
        .axios({
          method: "POST",
          url: "/api/fileUpload",
          headers: { "Content-Type": "multipart/form-data" },
          data: that.fileData,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            that.form.bannerPhotoPath = res.data.data.filePath;
            // that.$notify({
            //   title: '成功',
            //   message: '上传成功',
            //   type: 'success'
            // });
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // that.$notify({
            //   title: "错误",
            //   message: res.data.msg,
            //   type: "error"
            // });
          }
          that.fileData.delete("file");
          that.$refs.upload.uploadFiles = [];
        })
        .catch((e) => {
          that.fileData.delete("file");
          that.$refs.upload.uploadFiles = [];
          // that.$notify({
          //   title: "错误",
          //   message: "请求出错",
          //   type: "error"
          // });
        });
      that.$refs.upload.uploadFiles = [];
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 上传图片
     * @date:2020/7/13   15:00
     */
    submitFileSave2() {
      let that = this;
      that.fileData.append("file", that.$refs.upload2.uploadFiles[0].raw);
      that
        .axios({
          method: "POST",
          url: "/api/fileUpload",
          headers: { "Content-Type": "multipart/form-data" },
          data: that.fileData,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            // that.$notify({
            //   title: '成功',
            //   message: '上传成功',
            //   type: 'success'
            // });
            that.form.jumpPhotos.push({
              filePath: res.data.data.filePath,
              status: "1",
              operaType: "1",
            });
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // that.$notify({
            //   title: "错误",
            //   message: res.data.msg,
            //   type: "error"
            // });
          }
          that.fileData.delete("file");
          that.$refs.upload2.uploadFiles = [];
        })
        .catch((e) => {
          that.fileData.delete("file");
          that.$refs.upload2.uploadFiles = [];
          // that.$notify({
          //   title: "错误",
          //   message: "请求出错",
          //   type: "error"
          // });
        });
      that.$refs.upload2.uploadFiles = [];
    },
    changes() {
      console.log(this.form.optionss[0]);
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation：  时间格式化
     **/
    timeData(e) {
      let that = this;
      if (e) {
        that.listQuery.startDate = e[0];
        that.listQuery.endDate = e[1];
      } else {
        that.listQuery.startDate = undefined;
        that.listQuery.endDate = undefined;
      }
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 查看数据详情
     * @date:2020/7/12   22:21
     */
    checkInfo(row) {
      let that = this;
      if (row) {
        that
          .axios({
            //axios请求
            method: "POST",
            url: "/api/template/queryBannerPhoto",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: { oemUid: row.oemUid },
          })
          .then((res) => {
            if (res.data.code == "0000") {
              that.fileList = res.data.data;
            } else {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              // that.$notify({
              //   title: "错误",
              //   message: res.data.msg,
              //   type: "error"
              // });
            }
          });
        that.dialogFormBrandList = true;
      }
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 修改状态
     * @date:2020/7/14   20:48
     */
    upStatus(sataus, row) {
      let that = this;
      that
        .axios({
          //axios请求
          method: "POST",
          url: "/api/template/updateStatus",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: { uid: row.id, status: sataus },
        })
        .then((res) => {
          if (res.data.code == "0000") {
            that.handleSelectList();
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // that.$notify({
            //   title: "错误",
            //   message: res.msg,
            //   type: "error"
            // });
          }
        });
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 删除
     * @date:2020/7/14   20:09
     */
    deleteBnnerData(row) {
      let that = this;
      that
        .$confirm("请确认是否删除！?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that
            .axios({
              //axios请求
              method: "POST",
              url: "/api/template/deleteBanner",
              headers: { "Content-Type": "application/json;charset=utf-8" },
              data: { uid: row.id },
            })
            .then((res) => {
              if (res.data.code == "0000") {
                that.handleSelectList();
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
                // that.$notify({
                //   title: "错误",
                //   message: res.msg,
                //   type: "error"
                // });
              }
            });
        })
        .catch(() => {
          // that.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },

    /**
     * @author: Zhu Liangfu
     * @Description:
     * @date:2020/7/14   19:01
     */
    dialogFormPlay(row) {
      this.hideUpload=false
      let that = this;
      that.resetTheSearchData();
      if (row) {
        that
          .axios({
            //axios请求
            method: "POST",
            url: "/api/template/queryBannerUpdate",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: { uid: row.id },
          })
          .then((res) => {
            if (res.data.code == "0000") {
              that.form = Object.assign(that.form, res.data.data);
              // that.form.jumpPhotos=res.data.data.jumpPhotos
              //  回显
              if (res.data.data.jumpPhotos.length > 0) {
                this.form.jumpPhotos = res.data.data.jumpPhotos.map(
                  (ele, i) => {
                    let item = {};
                    item = ele;
                    item.url = ele.filePath;
                    item.id = ele.id;
                    item.filePath = ele.filePath;
                    ele.status == "1";
                    return item;
                  }
                );
              }

              let pops = [];
              pops.push({
                id: res.data.data.uid,
                filePath: res.data.data.bannerPhotoPath,
                status: "0",
              });
              // pops.push(res.date.data.bannerPhotoPath)
              console.log(pops);
              if (pops.length > 0) {
                this.form.options = pops.map((ele) => {
                  let item = {};
                  item = ele;
                  item.url = ele.filePath;
                  item.filePath = ele.filePath;
                  item.id = ele.id;
                  return item;
                });
                if (this.form.options.length >= 1) {
                  this.hideUpload = true;
                }
              }
              console.log(that.form);
              if (that.form.jumpType == 2) {
                that.form.optionss = [that.form.jumpAddress];
              }
            } else {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              // that.$notify({
              //   title: "错误",
              //   message: res.msg,
              //   type: "error"
              // });
            }
          });
        that.dialogFormHead = "修改";
        that.dialogFormSave = true;
      } else {
        that.dialogFormHead = "新增";
        that.dialogFormSave = true;
      }
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 图片校验
     * @date:2020/7/13   15:08
     */
    beforeUpload(file) {
      //  ;
      // 上传图片前处理函数
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1000;
      let that = this;
      let isAllow = false;
      if (!isJPG) {
        // this.$message.error();
        layer.open({
          content: "上传头像图片只能是 jpg、png、jpeg 格式!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      if (!isLt2M) {
        layer.open({
          content: "上传头像图片大小不能超过 1Mb!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$message.error();
      }
      const isSize = new Promise(function (resolve, reject) {
        let width = 345;
        let height = 140;
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.onload = function () {
          // let valid = that.$commit.ImageRestrictions(
          //   image.width,
          //   image.height,
          let valid = image.width >= width && image.height >= height;
          //   3
          // );
          // let name = file.name.substring(0, file.name.lastIndexOf('.'))+'_'+image.width+'_'+image.height
          //     file = new File([file], name);

          //     const valid = this.$commit.ImageRestrictions(image.width,image.height,1)
          valid ? resolve() : reject();
          // valid ? resolve() : reject();
        };
        image.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          layer.open({
            content: "banner图片尺寸不符合,只能是345：150!",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$message.error();
          return Promise.reject();
        }
      );
      return isJPG && isLt2M && isSize;
    },
    handleSuccess(res, file, fileList) {
      // let islt1M = file.size / 1024 / 1024 < 0.2
      // if (!islt1M) {
      //   this.$notify({title: "错误",message: '上传图片大小不能超过200kb',type: "error"});
      //   return false
      // }
      this.file = file.url;
      let pl = {
        status: "1",
        filePath: res.data.filePath,
        url: res.data.filePath,
      };
      this.form.options.push(pl);
      console.log(this.form.options);
    },

    handlePictureCardPreview(file, fileList) {
      console.log(444, file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleRemove(file, fileList) {
      for (let i = 0; i < this.form.options.length; i++) {
        this.form.options[i].uid == file.uid && this.form.options.splice(i, 1);
        // this.options[i].status == 1
      }
      this.hideUpload = fileList.length >= 1;
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/21
     * @annotation: 内部图片
     **/
    beforeUpload1(file) {
      // 上传图片前处理函数
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1000;
      let that = this;
      let isAllow = false;
      if (!isJPG) {
        layer.open({
          content: "上传头像图片只能是 jpg、png、jpeg 格式!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // that.$message.error();
      }
      if (!isLt2M) {
        // that.$message.error();
        layer.open({
          content: "上传头像图片大小不能超过 1Mb!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      return isJPG && isLt2M;
    },
    handleSuccess2(res, file, fileList) {
      // let islt1M = file.size / 1024 / 1024 < 0.2
      // if (!islt1M) {
      //   this.$notify({title: "错误",message: '上传图片大小不能超过200kb',type: "error"});
      //   return false
      // }
      this.file2 = file.url;
      let pl = {
        status: "1",
        filePath: res.data.filePath,
        url: res.data.filePath,
      };
      this.form.jumpPhotos.push(pl);
    },

    handlePictureCardPreview(file, fileList) {
      console.log(444, file);
      this.dialogImageUrl2 = file.url;
      this.dialogVisible2 = true;
    },
    handleRemove2(file, fileList) {
      console.log(666, this.imgData2, file);
      for (let i = 0; i < this.form.jumpPhotos.length; i++) {
        this.form.jumpPhotos[i].uid == file.uid &&
          this.form.jumpPhotos.splice(i, 1);
      }
    },

    handlePictureCardPreview2(file) {
      this.dialogImageUrl2 = file.url;
      this.dialogVisible2 = true;
    },
    /**
     * @author: Zhu Liangfu
     * @Description:新建修改弹框
     * @date:2020/6/10   20:50
     */
    createWindow(val) {
      let that = this;
      that.resetTheSearchData();
      if (val) {
        that.dialogFormBrandList = true;
      } else {
        that.dialogFormBrandList = true;
      }
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 创建Banner管理
     * @date:2020/6/10   20:10
     */
    create() {
      let that = this;
      console.log(that.form);
      that.$refs["form"].validate((valid) => {
        if (valid) {
          if (true) {
            if (that.form.jumpType == 2) {
              console.log(that.form.optionss);
              // return
              if (that.form.options.length >= 1 && that.form.optionss) {
                that.form.jumpPhotos = [];
                that.form.jumpAddress = that.form.optionss[0]
                  ? that.form.optionss[0]
                  : "";
                that.form.bannerPhotoPath = that.form.options[0].filePath;
                that.form.optionss = that.form.optionss[0]
                  ? that.form.optionss[0]
                  : "";
                that
                  .axios({
                    method: "POST",
                    url: "/api/template/saveBannerPhoto",
                    data: that.form,
                  })
                  .then((res) => {
                    if (res.data.code == "0000") {
                      // that.$notify({
                      //   title: "成功",
                      //   message: "保存成功",
                      //   type: "success"
                      // });
                      that.dialogFormSave = false;
                      that.handleSelectList();
                    } else {
                      layer.open({
                        content: "保存失败:" + res.data.msg,
                        skin: "msg",
                        time: 2, //1秒后自动关闭
                      });
                    }
                  });
              } else {
                layer.open({
                  content: "填写信息为空或输入错误",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
              }
            } else if (that.form.jumpType == 3) {
              console.log(that.form.options);
              // return
              if (
                that.form.options.length >= 1 &&
                that.form.jumpPhotos.length >= 1
              ) {
                that.form.jumpAddress = "";
                that.form.bannerPhotoPath = that.form.options[0].filePath;
                that.form.options = [];
                that
                  .axios({
                    method: "POST",
                    url: "/api/template/saveBannerPhoto",
                    data: that.form,
                  })
                  .then((res) => {
                    if (res.data.code == "0000") {
                      // that.$notify({
                      //   title: "成功",
                      //   message: "保存成功",
                      //   type: "success"
                      // });
                      that.dialogFormSave = false;
                      that.handleSelectList();
                    } else {
                      layer.open({
                        content: "保存失败:" + res.data.msg,
                        skin: "msg",
                        time: 2, //1秒后自动关闭
                      });
                    }
                  });
              } else {
                layer.open({
                  content: "填写信息为空或输入错误",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
              }
            } else if (that.form.jumpType == 4) {
              console.log(that.form.options);
              // return
              if (that.form.options.length >= 1 && that.form.jumpAddress) {
                if (isUrl(that.form.jumpAddress)) {
                  that.form.jumpPhotos = [];
                  that.form.bannerPhotoPath = that.form.options[0].filePath;
                  that
                    .axios({
                      method: "POST",
                      url: "/api/template/saveBannerPhoto",
                      data: that.form,
                    })
                    .then((res) => {
                      if (res.data.code == "0000") {
                        // that.$notify({
                        //   title: "成功",
                        //   message: "保存成功",
                        //   type: "success"
                        // });
                        that.dialogFormSave = false;
                        that.handleSelectList();
                      } else {
                        layer.open({
                          content: "保存失败:" + res.data.msg,
                          skin: "msg",
                          time: 2, //1秒后自动关闭
                        });
                      }
                    });
                } else {
                  layer.open({
                    content: "输入网址格式有误,(https://网址)",
                    skin: "msg",
                    time: 2, //1秒后自动关闭
                  });
                }
              } else {
                layer.open({
                  content: "填写信息为空或输入错误",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
              }
            }
            console.log(that.form);
          } else {
            layer.open({
              content: "填写信息为空或输入错误",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        }
      });
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 导出模板
     * @date:2020/6/11   20:44
     */
    exportFile() {
      let that = this;
      that
        .axios({
          method: "POST",
          url: "/api/product/excel/export",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.listQuery,
          responseType: "arraybuffer",
        })
        .then((res) => {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          let date = new Date();
          link.download =
            "banner管理列表" +
            date.getFullYear() +
            (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()) +
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
            (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
            (date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes()) +
            (date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds());
          link.click();
        })
        .catch((e) => {
          // that.$notify({
          //   title: "错误",
          //   message: "导出失败",
          //   type: "error"
          // });
        });
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件
     **/
    resetTheSearch() {
      let that = this;
      that.listQuery = {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        channelName: undefined, //	品牌名称
        channelCode: undefined, //	品牌编号
        officeType: undefined, //	机构类型
        officeName: undefined, //	机构名称
        phone: undefined, //	手机号
        status: undefined, //	状态
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        page: 1, //第几页
        number: 20, //每页几条
      };
      that.handleSelectList();
    },
    /**
     * @author: Zhu Liangfu
     * @Description:
     * @date:2020/7/14   17:20
     */
    resetTheSearchData() {
      let that = this;
      that.form = {
        uid: undefined, //	图片id
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        bannerPhotoPath: undefined, //	banner图片地址
        jumpAddress: undefined, //	跳转地址
        jumpType: 3, //	跳转类型
        jumpPhotos: [], //	跳转图片List
        options: [],
      };
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
.txtBlock {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-cascader-menu {
  width: 100%;
}
/deep/ .el-icon-plus {
  color: #409eff;
}
/deep/ .el-upload--picture-card {
  width: 100% !important;
  border: 0;
  background: #f9fafc;
}
/deep/ .handPath{
      width: 334px;
    margin-left: 15px;
}
/deep/ .handPath .el-input__inner{
  width: 100%;
}
/deep/ .el-upload-list__item {
  width: 100% !important;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  height: 100%;
  /* overflow-x: auto; */
  box-sizing: border-box;
  float: left;
}
/deep/ .el-radio-group {
  width: 100% !important;
}

.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}

.sousuojg6_10 {
  float: left;
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  border-radius: 5px;
}
.tabBtn{
  width: 33.33%;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #409EFF;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 500;
}

.fileList {
  display: inline-block;
  border-style: solid dotted dashed double;
  padding: 8px 8px 8px 8px;
  text-align: center;
}

.imageInfo {
  border: 1px #021322 solid;
  width: 300px;
  height: 150px;
  line-height: 150px;
  display: flex;
  margin: 10px 10px 10px 10px;
  text-align: center;
  font-size: 15px;
}
.content {
  min-width: calc(100% - 40px);
}

.btn {
  display: none;
  text-decoration: none;
  text-align: center;
}

.imageInfo:hover .btn {
  display: block;
  position: absolute;
  color: #ff3428;
  width: 300px;
  z-index: 2;
  height: 150px;
  line-height: 150px;
  background: #354e83;
  filter: alpha(opacity=60);
  -moz-opacity: 0.9;
  opacity: 0.9;
}

.imageInfos {
  margin: 10px 10px 10px 10px;
  text-align: center;
  font-size: 20px;
}

.imageInfos img {
  height: 150px;
  width: 100%;
  border: 1px #002f3f solid;
}

.imageListData {
  margin: 10px;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.f12 {
  margin-top: 115px;
}
.imageInfoList {
  margin: 20px 10px 20px 10px;
  height: 170px;
  width: 300px;
  display: flex;
}

.imageTextList {
  height: 300px;
  line-height: 300px;
  width: 150px;
  display: none;
  text-decoration: none;
}

.imageInfoList:hover .imageTextList {
  display: block;
  position: absolute;
  color: #ff3428;
  width: 150px;
  z-index: 2;
  height: 300px;
  line-height: 300px;
  background: #ffffff;
  filter: alpha(opacity=60);
  -moz-opacity: 0.9;
  opacity: 0.9;
}
/deep/ .el-upload-list__item {
  transition: none !important;
}
</style>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
